<template>
  <view class="check-number">
    <title-bar>
      <view class="title">验号结果</view>
    </title-bar>
    <view class="check-number-content">
      <scroll-view scroll-y="true">
        <view class="programme">
          <view class="programme-title-container">
            <text class="title">{{ plan_name }}</text>
            <view class="operator-container">
              <view class="copy-number" @tap="handleCopyData">复制号码</view>
              <!-- <view class="follow">关注</view> -->
            </view>
          </view>
          <hold-back-card
            :boldCode="dan"
            :towingCodeList="tuo.split(',')"
          ></hold-back-card>
        </view>
        <view class="number-analysis">
          <view class="number-analysis-header">
            <text class="text">号码分析</text>
            <view class="desc-container">
              <picker
                mode="multiSelector"
                @columnchange="onCateChange"
                :value="cateChooseList"
                :range="cpCategoryList"
                range-key="name"
              >
                <view class="flex align-center">
                  <view>
                    {{ cpCategoryList[0][cateChooseList[0]].name }}
                    {{ cpCategoryList[1][cateChooseList[1]].name }}
                  </view>
                  <view class="picker-suffix-icon">
                    <image mode="widthFix" src="../../static/form/choose.png" />
                  </view>
                </view>
              </picker>
            </view>
          </view>
          <view class="number-analysis-info">
            <view class="number-analysis-info-title data-statistics">
              数据统计
            </view>
            <view class="number-analysis-info-table">
              <view class="table-item">
                <text class="top">实出</text>
                <text class="bottom">{{ yilou }}</text>
              </view>
              <view class="table-item">
                <text class="top">差值</text>
                <text class="bottom">{{ cha }}</text>
              </view>
              <view class="table-item">
                <text class="top">回补几率</text>
                <text class="bottom">{{ supplyment }}</text>
              </view>
              <view class="table-item">
                <text class="top">投资价值</text>
                <text class="bottom">{{ investment }}</text>
              </view>
              <view class="table-item">
                <text class="top">当前遗漏</text>
                <text class="bottom">{{ cur }}</text>
              </view>
              <view class="table-item">
                <text class="top">最大遗漏</text>
                <text class="bottom">{{ max }}</text>
              </view>
            </view>
            <view class="number-analysis-info-title">趋势图</view>
            <loveable-k-card
              v-if="trend"
              :kData="[...trend, ...trend]"
            ></loveable-k-card>
            <view class="number-analysis-info-title omission">遗漏图</view>
            <view class="chart-container">
              <omission v-if="mData" :mData="mData"></omission>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import TitleBar from '@/components/title-bar/title-bar.vue'
import HoldBackCard from '@/components/hold-back-card/hold-back-card.vue'
import LoveableKCard from '@/components/loveableKCard/base.vue'
import Omission from '@/components/loveableKCard/omission.vue'
import { getYilouChart } from '@/api/plan.js'
import { getCaipiaoCategoryList } from '@/api/common'

export default {
  components: {
    TitleBar,
    HoldBackCard,
    LoveableKCard,
    Omission,
  },
  data() {
    return {
      qiIndex: 0,
      totals: [
        { value: 50, name: '50期' },
        { value: 100, name: '100期' },
        { value: 200, name: '200期' },
        { value: 400, name: '400期' },
        { value: 1000, name: '1000期' },
        { value: 2000, name: '2000期' },
        // { value: 5000, name: '5000期' },
      ],
      plan_name: '',
      caipiao_id: '',
      qishu: 0,
      dan: '',
      tuo: '',
      yilou: 0,
      max: 0,
      cha: 0,
      cur: 0,
      supplyment: 0,
      investment: 0,
      yilouC: [],
      mData: null,
      trend: null,
      cateChooseList: [0, 0],
      cpCategoryList: [
        [
          {
            name: '江苏',
            id: '1',
          },
        ],
        [
          {
            name: '50期',
            id: 50,
          },
        ],
      ],
      c_id: '',
      qishu: 0,
    }
  },
  methods: {
    onCateChange(e) {
      this.$set(this.cateChooseList, e.detail.column, e.detail.value)
      this.c_id = this.cpCategoryList[0][this.cateChooseList[0]].id
      this.qishu = this.cpCategoryList[1][this.cateChooseList[1]].value

      this.getYilouChart(this.p_id, this.c_id)
    },
    getCateList() {
      return new Promise((resolve, reject) => {
        getCaipiaoCategoryList().then(res => {
          if (res.code === 1 && res.data) {
            let resList = []
            resList = res.data.map(data => {
              return {
                id: data.c_id,
                name: data.c_name,
              }
            })
            this.$set(this.cpCategoryList, 0, resList)
            this.$set(this.cpCategoryList, 1, [
              { value: 50, name: '50期' },
              { value: 100, name: '100期' },
              { value: 200, name: '200期' },
              { value: 400, name: '400期' },
              { value: 1000, name: '1000期' },
              { value: 2000, name: '2000期' },
              // { value: 5000, name: '5000期' },
            ])
            this.c_id = this.cpCategoryList[0][this.cateChooseList[0]].id
            this.qishu = this.cpCategoryList[1][this.cateChooseList[1]].value
            resolve()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
            reject()
          }
        })
      })
    },
    getYilouChart(p_id, c_id = '') {
      getYilouChart({
        p_id,
        c_id,
      }).then(
        ({
          data: {
            plan_name,
            caipiao_id,
            qishu,
            dan,
            tuo,
            yilou,
            max,
            cha,
            cur,
            yilouC,
            yilouK,
            investment,
            supplyment,
          },
        }) => {
          this.plan_name = plan_name
          this.caipiao_id = caipiao_id
          this.qishu = qishu
          this.dan = dan
          this.tuo = tuo
          this.yilou = yilou
          this.max = max
          this.cha = cha
          this.cur = cur
          this.yilouC = yilouC
          this.investment = investment
          this.supplyment = supplyment
          this.mData = {
            categories: yilouC.map(item => `${item.qihao}期`),
            series: [{ name: '', data: yilouC.map(item => item.quantity) }],
          }

          this.trend = yilouK
        }
      )
    },
    handleCopyData() {
      uni.setClipboardData({
        data: `胆码：${this.dan}； 拖码：${this.tuo}`,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
          })
        },
      })
    },
  },
  onLoad(option) {
    this.p_id = option.p_id

    this.getCateList().then(() => {
      this.getYilouChart(this.p_id, this.c_id)
    })
  },
}
</script>

<style lang="scss" scoped>
.check-number {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  .title {
    font-size: 32upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    text-align: center;
  }

  &-content {
    position: fixed;
    top: 88upx;
    overflow-y: scroll;
    bottom: 0;
    width: 100%;
    padding: 20upx 28upx;
    .programme {
      width: 100%;
      height: 268upx;
      background-color: #ffffff;
      box-shadow: 0upx 4upx 12upx 0upx rgba(12, 124, 202, 0.1);
      border-radius: 20upx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 20upx;
      margin-bottom: 20upx;
      &-title-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .title {
          font-size: 32upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }

        .operator-container {
          display: flex;
          align-items: center;
          .copy-number,
          .follow {
            height: 60upx;
            line-height: 60upx;
            background: rgba(237, 242, 246, 1);
            border-radius: 30upx;
            font-size: 28upx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            padding: 0 24upx;
            display: inline-block;
          }

          .copy-number {
            color: rgba(41, 153, 255, 1);
          }

          .follow {
            color: rgba(255, 255, 255, 1);
            background: rgba(20, 158, 255, 1);
            margin-left: 20upx;
          }
        }
      }
    }

    .number-analysis {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0upx 4upx 12upx 0upx rgba(12, 124, 202, 0.1);
      border-radius: 20upx;
      background-color: #ffffff;
      padding: 20upx;
      .number-analysis-info {
        padding: 20upx 0;
        .chart-container {
          width: 654upx;
          height: 240upx;
          overflow-x: scroll;
        }
        &-title {
          font-size: 24upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: bold;
          color: rgba(41, 153, 255, 1);
          margin-bottom: 12upx;
          &.omission {
            margin-top: 20upx;
          }
        }

        &-table {
          display: flex;
          align-items: center;
          margin-bottom: 20upx;
          .table-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .top {
              font-size: 22upx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              margin-bottom: 20upx;
            }
            .bottom {
              font-size: 28upx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
            }
          }
        }
      }
      &-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 28upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        padding-bottom: 22upx;
        border-bottom: 2upx solid #edf2f6;
        .desc-container {
          display: flex;
          align-items: center;
          .picker-suffix-icon {
            display: inline-block;
            height: 28upx;
            margin-left: 22upx;
            line-height: 28upx;
            uni-image {
              width: 22upx;
              height: 28upx;
            }
          }
        }
      }
    }
  }
}
</style>
